
<template>
  <el-form
    ref="channelForm"
    :model="form"
    :size="size"
    :rules="rules"
    :label-suffix="labelSuffix"
    :label-position="labelPosition"
    :label-width="labelWidth"
    @submit.native.prevent
  >
    <el-form-item
      ref="formInput.title"
      label="频道名称"
      prop="title"
      class="form-item--medium"
    >
      <el-input v-model="form.title" />
    </el-form-item>
    <el-form-item
      ref="formInput.name"
      label="频道"
      prop="name"
      class="form-item--medium"
    >
      <el-input v-model="form.name" />
      <div class="form-item__tips">作为导航频道时展示的名称</div>
    </el-form-item>
    <el-form-item
      label="商品源类型"
      prop="source_type"
    >
      <el-radio-group v-model="form.source_type">
        <el-radio-button
          v-for="(item,index) in sourceTypeList"
          :key="index"
          :label="item.value"
        >{{ item.label }}</el-radio-button>
      </el-radio-group>
      <div
        v-if="form.source_type"
        class="form-item__tips"
      >提交保存完成后设置数据源内容</div>
    </el-form-item>
    <el-form-item
      v-if="!form.source_type"
      label="关键字"
      prop="keywords"
    >
      <keyword-select v-model="form.keywords" />
    </el-form-item>
    <el-form-item
      label="是否导航"
      prop="nav"
    >
      <el-switch
        v-model="form.nav"
        :active-value="1"
        :inactive-value="0"
      />
      <div class="form-item__tips">开启后将展示为首页选项卡导航，如设置了导航类型其他数据源将不可引用当前频道数据</div>
    </el-form-item>
    <el-form-item
      label="开启状态"
      prop="status"
    >
      <el-switch
        v-model="form.status"
        :active-value="10"
        :inactive-value="0"
      />
    </el-form-item>
    <slot name="action">
      <form-action v-if="actionVisible">
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
          >{{ submitButtonText }}</el-button>
        </el-form-item>
      </form-action>
    </slot>
  </el-form>
</template>

<script>
import { objectFillMerge } from '@/utils'
import KeywordSelect from '@/components/Form/KeywordSelect'
import FormAction from '@/components/Form/FormAction'
export default {
  name: 'StaffForm',
  components: {
    KeywordSelect,
    FormAction
  },
  props: {
    primaryKey: {
      type: [String, Number],
      default: 0
    },
    labelPosition: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: String,
      default: '20%'
    },
    labelSuffix: {
      type: String,
      default: '：'
    },
    size: {
      type: String,
      default: 'small'
    },
    submitButtonText: {
      type: String,
      default: '提交保存'
    },
    actionVisible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      form: {
        name: '',
        title: '',
        listorder: 0,
        source_type: 0,
        keywords: [],
        thumb: '',
        description: '',
        status: 0
      },
      sourceTypeList: [],
      rules: {
        name: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
        title: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
        source_type: [{ required: true, message: '请设置商品数据源', trigger: 'change' }]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.onLoad()
  },
  mounted() {
    console.log('on mounted form')
  },
  methods: {
    onLoad() {
      this.$http.channel.update(this.form, this.primaryKey, false).then(res => {
        const { form, sourceTypeList } = res.data
        this.form = objectFillMerge(this.form, form)
        this.sourceTypeList = sourceTypeList
      })
    },
    onSubmit() {
      this.$refs.channelForm.validate((valid, obj) => {
        if (valid) {
          console.log(this.form)
          this.$http.channel.update(this.form, this.primaryKey).then(res => {
            this.$emit('submit', res.data)
          })
        } else {
          let firstErrorElname = ''
          for (const i in obj) {
            firstErrorElname = `formInput.${i}`
            break
          }
          var dom = this.$refs[firstErrorElname]
          console.log(dom, this.$refs)
          if (dom) {
            dom.$refs.input && dom.$refs.input.focus()
            dom.$el.scrollIntoView({
              // 滚动到指定节点
              block: 'center', // 值有start,center,end，nearest，当前显示在视图区域中间
              behavior: 'smooth' // 值有auto、instant,smooth，缓动动画（当前是慢速的）
            })
          }
          console.log('error submit!!', this.form)
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss">
.brand-upload {
  &__thumb,
  &__cover {
    .upload-square {
      background: #f2f3f7;
    }
  }
}
</style>
